<template>
    <div :id="eId" :style="{height: height}"></div>
</template>

<script>
var echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/line')
require('echarts/lib/chart/bar')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/toolbox')
require('echarts/lib/component/title')
require('echarts/lib/component/markPoint')
require('echarts/lib/component/markLine')
require('echarts/lib/component/legend')
export default {
  name: 'LineChart',
  props: {
    // 折线名称
    'axisName': {
      type: String,
      default: '未命名'
    },
    // x y 轴线的属性
    axisAttribute: {
      type: Object,
      default: () => ({
        // x 轴属性
        xAttr: {
          showXLine: 'true',
          showXData: 'true',
          showYColor: '#000',
          muitiXType: 'dashed'
        },
        // y 轴属性
        yAttr: {
          // y 轴线
          showYLine: 'true',
          // y 轴线上的值
          showYData: 'true',
          // y轴线颜色
          showYColor: '#000',
          // 分割线类型
          muitiYType: 'dashed'
        }
      })
    },
    // 区域颜色的索引
    areaIndex: {
      type: Number,
      default: 4
    },
    // 样式
    linestyle: {
      type: Object,
      default: () => ({
        smooth: false,
        showData: false,
        lineColor: '#999'
      })
    },
    // 标题的布局
    'titleAlign': {
      type: String,
      default: 'left'
    },
    // 标题的颜色
    'titleColor': {
      type: String,
      default: '#333',
      textAlign: 'right'
      // textVerticalAlign: 'bottom'
    },
    // 标题
    'title': {
      type: String,
      default: ''
    },
    // 图表id
    eId: {
      type: String
    },
    // 图标高度
    'height': {
      type: String
      // default: '328px'
    }
  },
  data() {
    return {
      observer: null,
      firedNum: 0,
      recordOldValue: { // 记录下旧的宽高数据，避免重复触发回调函数
        width: '0',
        height: '0'
      },
      // 区域渐变色填充
      areaColor: [
        [
          { offset: 0, color: 'purple' },
          { offset: 0.5, color: 'pink' },
          { offset: 1, color: 'blue' }
        ],
        [
          { offset: 0, color: 'red' },
          { offset: 0.5, color: 'pink' },
          { offset: 1, color: '#ddd' }
        ],
        [
          { offset: 0, color: '#CCF5F1' },
          { offset: 0.5, color: '#5EEBDD' },
          { offset: 1, color: '#90E8A4' }
        ],
        []
      ]
    }
  },

  watch: {
    axisName: function(newValue) {
      this.initCharts()
    },
    axisAttribute: {
      deep: true,
      handler(val) {
        this.initCharts()
      }
    },
    areaIndex: function(newValue) {
      console.log('=========')
      console.log(newValue)
      this.initCharts()
    },
    linestyle: {
      deep: true,
      handler(val) {
        this.initCharts()
      }
    },
    titleAlign: function(newValue, oldValue) {
      // console.log('输出了此行代码')
      this.initCharts()
    },
    titleColor: function(newValue, oldValue) {
      // console.log('输出了此行代码')
      this.initCharts()
    },
    title: function(newValue, oldValue) {
      // console.log('输出了此行代码')
      this.initCharts()
    }
  },
  mounted() {
    this.initCharts()
    const autoHeight = '200px'
    this.chart.getDom().style.height = autoHeight
    this.chart.getDom().childNodes[0].style.height = autoHeight
    this.chart.getDom().childNodes[0].childNodes[0].setAttribute('height', autoHeight)
    this.chart.getDom().childNodes[0].childNodes[0].style.height = autoHeight
    this.chart.resize()
    window.addEventListener('resize', () => {
      this.chart.resize()
    })
  },
  methods: {
    // 初始化图表
    initCharts() {
      this.chart = echarts.init(document.getElementById(this.eId))
      this.setOptions()
    },
    setOptions: function() {
      // const $this = this
      var this_ = this
      var colorRgb = 'rgba(' + this.colorArr
      console.log('colorRgb' + colorRgb)
      this.chart.setOption({
        title: {
          text: this.title,
          textStyle: {
            color: this_.titleColor
          },
          left: this_.titleAlign
        },
        grid: {
          y: 80,
          y2: 20
        },
        // x 轴属性
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          splitLine: {
            show: this.axisAttribute.xAttr.muitiXType,
            lineStyle: {
              width: 1,
              // y 平行分割线类型
              type: this.axisAttribute.xAttr.muitiXType
            }
          },
          axisLine: {
            // x 轴线
            show: this.axisAttribute.xAttr.showXLine,
            lineStyle: {
              // 坐标轴的颜色
              color: this.axisAttribute.xAttr.showXColor
            }
          },
          axisLabel: {
            // 显示y坐标轴线的值
            show: this.axisAttribute.xAttr.showXData
          }
        },
        // y 轴属性
        yAxis: {
          type: 'value',
          splitLine: {
            show: this.axisAttribute.yAttr.muitiYType,
            lineStyle: {
              width: 1,
              // y 平行分割线类型
              type: this.axisAttribute.yAttr.muitiYType
            }
          },
          axisLine: {
            // y轴线
            show: this.axisAttribute.yAttr.showYLine,
            lineStyle: {
              // 坐标轴的颜色
              color: this.axisAttribute.yAttr.showYColor
            }
          },
          axisLabel: {
            // 显示y坐标轴线的值
            show: this.axisAttribute.yAttr.showYData
          }
        },
        // 折线名称配置
        legend: {
          data: [this.axisName],
          top: 30
        },
        // 值
        series: [{
          name: this.axisName,
          // smooth 折现平滑效果
          smooth: this.linestyle.smooth,
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          itemStyle: {
            normal: {
              lineStyle: { color: this.linestyle.lineColor },
              label: { show: this.linestyle.showData }
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, this.areaColor[this.areaIndex - 1])
            }
          }
        }]
      })
    }
  }
}
</script>

<style scoped>

</style>
